<template>
  <div class="header_body">
    <div class="header_logo" @click="$router.push({ name: 'Home' })">
      <img src="../../assets/logo.png" alt="">
      <div>荔枝营销推广系统 ( AI智能客服版 )</div>
    </div>
    <div class="header_main">
      <!-- <div class="header_main_item">导航1</div>
            <div class="header_main_item">导航2</div>
            <div class="header_main_item">导航3</div>
            <div class="header_main_item">导航4</div>
            <div class="header_main_item">导航5</div> -->
    </div>
    <div class="header_main_button" id="header_main_button" @click="tapMenu">
      <ul @click.stop ref="list_menu" id="header_main_id">
        <li v-if="expertBool === '1'">{{ name }}(专家)</li>
        <li v-else>{{ name }}(用户)</li>
        <li @click="$router.push({ name: 'Myself' })" type="info">个人中心</li>
        <li @click="$router.push({ name: 'Home' })" type="home">首页</li>
        <li @click="$router.push({ name: 'Experts' })" type="expert">专家库列表</li>
        <li @click="$router.push({ name: 'RemoteStudySource' })" type="expert">远程培训</li>
        <li @click="$router.push({ name: 'Knowledge' })" type="knowledge">知识库列表</li>
        <li @click="$router.push({ name: 'News' })" type="new">新闻列表</li>
        <li @click="$router.push({ name: 'OnlineSeekSend' })" type="online">专家咨询</li>
        <li @click="$router.push({ name: 'SmartSeek' })" type="smart">AI智能客服</li>
        <li @click="$router.push({ name: 'weatherinfo' })" type="weather">数据分析</li>
        <li @click="exitLogin" type="exit">退出</li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      expertBool: null,
      name: null
    }
  },
  mounted() {
    this.name = this.$cookie.getCookie("name");
    this.expertBool = this.$cookie.getCookie("expertBool");
  },
  methods: {
    tapMenu() {
      // console.log("tapMenu========>>>", this.$refs);
      let mList = this.$refs.list_menu;
      if (mList.clientHeight === 0) {
        mList.style.height = "572px";
      } else {
        mList.style.height = 0;
      }
    },
    hiddenMenu() {
      let mList = this.$refs.list_menu;
      mList.style.height = 0;
    },
    exitLogin() {
      this.$cookie.delCookie("login");
      this.$router.push({ name: "Login" });
    }
  },
  watch: {
    $route: "hiddenMenu"
  },
}
</script>

<style scoped>
.header_body {
  height: var(--headerHeight);
  display: flex;
  background-image: url("../../assets/gufeng2.jpg");
  background-repeat: no-repeat;
  background-size: cover;
}

.header_logo {
  cursor: pointer;
  width: 470px;
  display: flex;
  justify-content: center;
  align-items: center;
  /* background-color: rgb(17, 112, 196); */
}



.header_logo img {
  width: 75px;
  height: 100%;
}

.header_logo div {
  font-size: 25px;
  color: var(--logoColor);
  font-weight: bold;
}

@media (max-width: 400px) {
  .header_logo div{
    font-size: 15px !important;
    cursor: pointer;

    width: 240px;
    display: flex;
    justify-content: center;
    align-items: center;
  }
}

.header_main {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
}

.header_main_item {
  margin: 0 20px;
  cursor: pointer;
  height: 100%;
  line-height: var(--headerHeight);
}

.header_main_button {
  height: 100%;
  width: 32px;
  margin: 0 20px;
  position: relative;
}

.header_main_button ul::-webkit-scrollbar {
  width: 5px;
  background-color: var(--borderColor);
}

.header_main_button ul::-webkit-scrollbar-thumb {
  background-color: skyblue;
}

.header_main_button ul {
  margin: 0;
  padding: 0;
  list-style: none;
  background-color: var(--mainColor);
  border-radius: 5px;
  position: absolute;
  width: 200px;
  height: 0;
  top: var(--headerHeight);
  right: -20px;
  overflow-y: scroll;
  border: 1px solid var(--borderColor);
  transition: all 1s;
  text-align: center;
  margin-bottom: var(--footerHeight);

}

.header_main_button ul li {
  cursor: pointer;
  padding: 15px;
  padding-left: 32px;
  line-height: normal;
  border-bottom: 1px solid var(--borderColor);
  transition: background 1s;
  position: relative;
}

.header_main_button ul li:nth-child(1) {
  background-color: var(--headerColor);
}

.header_main_button ul li:nth-child(1) img {
  width: 64px;
  height: 64px;
  border: 1px solid var(--borderColor);
  border-radius: 50%;
}

.header_main_button ul li:nth-child(1) div {
  margin: 5px 0;
}

.header_main_button ul li::before {
  content: '';
  position: absolute;
  width: 32px;
  height: 32px;
  left: 32px;
  top: 0;
  bottom: 0;
  margin: auto;
}

.header_main_button ul li[type=info]::before {
  background-image: url("");
}

.header_main_button ul li[type=knowledge]::before {
  background-image: url("");
}

.header_main_button ul li[type=expert]::before {
  background-image: url("");
}

.header_main_button ul li[type=home]::before {
  background-image: url("");
}

.header_main_button ul li[type=new]::before {
  background-image: url("");
}

.header_main_button ul li[type=online]::before {
  background-image: url("");
}

.header_main_button ul li[type=smart]::before {
  background-image: url("");
}

.header_main_button ul li[type=weather]::before {
  background-image: url("");
}

.header_main_button ul li[type=exit]::before {

  background-image: url("");
}

.header_main_button ul li:hover {
  background-color: gray;
  border-right: 5px solid orange;
}

.header_main_button::after {
  cursor: pointer;
  content: '';
  position: absolute;
  width: 32px;
  height: 32px;
  top: 0;
  bottom: 0;
  margin: auto;
  background-image: url("");
}
</style>
